@CHARSET "UTF-8";
*{
    margin: 0px;
    padding: 0px;
    font-family: fontawesome;
}
video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
.fadeInLeft{
    animation: fadeInLeft 2s forwards;
}
@-webkit-keyframes fadeInLeftTop {
    0% {
        opacity: 0;
        transform: translate3d(12%,12%,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}
@keyframes fadeInLeftTop {
    0% {
        opacity: 0;
        transform: translate3d(12%,12%,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}
.fadeInLeftTop{
    animation: fadeInLeftTop 2s forwards;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(-50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(-50%,0,0)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
.fadeInRight{
    animation: fadeInRight 2s forwards;
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.fadeIn{
    animation: fadeIn 2s forwards;
}
.yywl_index_con{

}
.yywl_page_1{

}
.yywl_page1_top{
    width: 80%;
    height: 80px;
    z-index: 102;
    position: absolute;
    top: 0px;
    padding: 20px 10% 0px 10%;
    background: #ededed40;
    border-bottom: 1px solid #9b9b9b;
}
.yywl_page1_logo{
    width: 40%;
    float: left;
}
.yywl_page1_logo img{
    width: 269px;
    height: 55px;
}
.yywl_page1_link{
    width: 50%;
    float: right;
}
.devlogistics_auth{
    float: right;
}
.yywl_auth{
    float: right;
}
.auth{
    margin: 18px 30px;
}
.auth a{
    color: #fff;
    font-size: 0.8vw;
    text-decoration: none;
}
.yywl_hero{
    width: 100%;
    height: 100vh;
    min-height: 720px;
    max-height: 1155px;
    background: #ccc;
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
}
.yywl_hero_bg{
    position: absolute;
    width: 100%;
    height: 100%;
}
.yywl_hero_active{
    width: 100%;
    height: 216px;
    background: url('../img/n_hero_active_bg.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -1px;
    z-index: 102;
    opacity: 0;
    animation: fadeInUp 1s forwards;
    animation-delay: 3s;
}
.yywl_hero_text{
    position: absolute;
    width: 100%;
    margin-top: -100px;
    top: 44%;
    opacity: 0;
    animation: fadeInUp 2s forwards;
    animation-delay: 1s;
}
.yywl_hero_top{
    font-size: 3.3854166667vw;
    font-weight: bolder;
    text-align: center;
    line-height: 7vw;
    letter-spacing: 10px;
}
.yywl_hero_bottom{
    font-size: 2.3854166667vw;
    text-align: center;
}
.yywl_hero_bottom b{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #fff;
    vertical-align: middle;
    margin: 0px 15px;
}
.yywl_hero_video{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    overflow-clip-margin: content-box;
    overflow: clip;
}
.yywl_page_con{
    height: 100%;
    position: relative;
}
.yywl_page_2{
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 104;
    overflow: hidden;
    margin-top: 100%;
}
.yywl_page2_con{
    width: 100%;
    height: 100%;
    position: relative;
}
.yywl_page2_count{
    position: absolute;
    right: 16%;
    bottom: 20%;
    width: 80%;
    opacity: 0;
    animation-delay: 1s;
}
.yywl_page2_list{
    padding: 1.5% 4%;
    float: right;
    background: #edf1f3;
    margin: 0px 3px;
    font-size: 0.7vw;
    line-height: 1.5vw;
    color: #868788;
    min-width: 120px;
    transition: background-color 0.5s ease;
    cursor: pointer;
    position: relative;
}
.yywl_page2_list:hover{
    background-color: #ea223d;
    color: #fff;
}
.yywl_page2_list:hover .page2_list_num b{
    color: #fff;
}
.page2_list_num{

}
.page2_list_num b{
    font-size: 1.7vw;
    margin-right: 5px;
    color: #000;
    font-weight: normal;
}
.yywl_page2_left{
    width: 45%;
    position: absolute;
    left: 0px;
    top: 10%;
    height: 90%;
}
.yywl_page2_img{
    width: 60%;
    height: 80%;
    background: url(../img/n_page2_left.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    right: 30px;
    top: 8%;
    opacity: 0;
}
.yywl_page2_img_bg{
    width: 60%;
    height: 70%;
    position: absolute;
    right: 85px;
    top: 0px;
    border: 2px solid #d1ddf2;
    z-index: -1;
    border-top-left-radius: 238px;
    opacity: 0;
    animation-delay: 1s;
}
.yywl_page2_right{
    width: 55%;
    position: absolute;
    right: 0px;
    height: 90%;
    top: 10%;
}
.yywl_page2_title{
    position: absolute;
    left: 0px;
    font-size: 2.5vw;
    font-weight: bolder;
    letter-spacing: 3px;
}
.yywl_page2_title img{
    width: 250px;
}
.yywl_page2_title b{
    position: absolute;
    width: 500px;
    bottom: 25px;
    left: 80px;
}
.yywl_page2_text{
    position: absolute;
    top: 300px;
    left: 80px;
    font-size: 0.9vw;
    width: 60%;
    letter-spacing: 3px;
    line-height: 40px;
    text-align: justify;
}
.yywl_page2_bg{
    position: absolute;
    right: 30px;
    width: 100px;
    height: 100%;
    background: url(../img/n_page2_right.png) no-repeat;
    background-size: 100%;
    background-position: center;
    opacity: 0;
}
.yywl_page_3{
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 104;
    background: #f3f6f9;
    overflow: hidden;
}
.yywl_page3_title{
    position: absolute;
    top: 12%;
    left: 10%;
    font-size: 2.5vw;
    font-weight: bolder;
}
.yywl_page3_con{
    width: 80%;
    position: absolute;
    height: 45%;
    top: 32%;
    opacity: 0;
    left: 10%;
    overflow: visible;
}
.yywl_page3_list{
    height: 100%;
    display: table-cell;
    position: relative;
    transition: background-color 0.5s ease;
    cursor: pointer;
}
.yywl_page3_list:hover{
    background-color: #ea223d !important;
    color: #fff;
}
.yywl_page3_list:hover .yywl_page3_list_number{
    color: #fff;
}
.yywl_page3_list:nth-child(1){
    background: url(../img/n_page3_bg1.png) no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
    background-color: #fff;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 20%;
}
.yywl_page3_list:nth-child(2){
    background: url("../img/n_page3_bg2.png") no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
    background-color: #fff;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 20%;
}
.yywl_page3_list:nth-child(3){
    background: url("../img/n_page3_bg3.png") no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
    background-color: #fff;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 20%;
}
.yywl_page3_list:nth-child(4){
    background: url("../img/n_page3_bg4.png") no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
    background-color: #fff;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 20%;
}
.yywl_page3_list:nth-child(5){
    background: url("../img/n_page3_bg5.png") no-repeat;
    background-size: 100% auto;
    background-position: right bottom;
    background-color: #fff;
    border-bottom-left-radius: 20%;
    border-top-right-radius: 20%;
}
.yywl_page3_list_number{
    margin: 5%;
    font-size: 1.8vw;
    font-weight: bolder;
    color: #d3d1d1;
}
.yywl_page3_list_title{
    width: 55%;
    margin-left: 5%;
    position: absolute;
    bottom: 40%;
    font-size: 1.8vw;
    font-weight: bolder;
}
.yywl_page3_list_text{
    width: 55%;
    margin-left: 5%;
    position: absolute;
    bottom: 20%;
    font-size: 1.2vw;
    line-height: 32px;
}
.yywl_page_4{
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 104;
    overflow: hidden;
}
.yywl_page4_con{
    width: 75%;
    right: 0px;
    height: 70%;
    top: 15%;
    position: absolute;
    opacity: 0;
}
.yywl_page4_left{
    width: 45%;
    height: 100%;
    left: 0px;
    background: #f3f6f9;
    border: 1px solid #cfdbf0;
    border-right: 0px;
    border-top-left-radius: 55%;
    border-bottom-left-radius: 55%;
    position: absolute;
}
.yywl_page4_left img{
    width: 80%;
    height: auto;
    margin-left: -40%;
    margin-top: -40%;
    position: absolute;
    left: 50%;
    top: 50%;
}
.yywl_page4_right{
    width: 50%;
    height: 100%;
    right: 0px;
    background: #f3f6f9;
    border-top: 1px solid #cfdbf0;
    border-bottom: 1px solid #cfdbf0;
    position: absolute;
    padding-left: 5%;
}
.yywl_page4_title{
    margin: 10% 10% 5%;
    font-size: 2.5vw;
    font-weight: bolder;
}
.yywl_page4_text{
    margin: 0% 10% 10% 10%;
    font-size: 0.9vw;
    width: 60%;
    text-align: justify;
    line-height: 40px;
    letter-spacing: 3px;
}
.yywl_page4_right a{
    margin: 10%;
    padding: 18px 25px;
    background: #ea223d;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.8vw;
}
.yywl_page4_right a:hover{
    opacity: 0.8;
}
.yywl_page4_right b{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #fff;
    margin-left: 10px;
    color: red;
    line-height: 26px;
    border-radius: 26px;
    text-align: center;
    font-size: 0.8vw;
}
.yywl_page4_icon{
    position: absolute;
    opacity: 0;
    font-size: 1vw;
}
.yywl_page4_icon img{
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #d3dff3;
    border-radius: 40px;
    background: #fff;
    margin: 0px 0px 0px 10px;
    position: initial;
}
.yywl_page4_icon1{
    left: -54px;
    top: 20%;
    animation-delay: 2s;
}
.yywl_page4_icon2{
    left: -120px;
    top: 40%;
    animation-delay: 2.5s;
}
.yywl_page4_icon3{
    left: -94px;
    top: 60%;
    animation-delay: 3s;
}
.yywl_page4_icon4{
    left: -44px;
    top: 80%;
    animation-delay: 3.5s;
}
@media (min-width: 1300px) {
    .yywl_page4_icon2{
        left: -100px;
        top: 40%;
        animation-delay: 2.5s;
    }
    .yywl_page4_icon3{
        left: -78px;
        top: 60%;
        animation-delay: 3s;
    }
}
@media (min-width: 1920px) {
    .yywl_page4_icon2{
        left: -120px;
        top: 40%;
        animation-delay: 2.5s;
    }
    .yywl_page4_icon3{
        left: -94px;
        top: 60%;
        animation-delay: 3s;
    }
}
.yywl_page_5{
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 104;
    overflow: hidden;
}
.yywl_page5_title{
    position: absolute;
    top: 12%;
    left: 10%;
    font-size: 2.5vw;
    font-weight: bolder;
    z-index: 105;
}
.yywl_page5_bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 75%;
    height: 75%;
    background: #f3f6f9;
    border-bottom-right-radius: 30%;
    opacity: 0;
}
.yywl_page5_con{
    position: absolute;
    left: 10%;
    top: 25%;
    height: 50%;
    width: 100%;
}
.yywl_page5_left{
    position: absolute;
    left: 0px;
    width: 50%;
    height: 100%;
}
.yywl_page5_name{
    font-size: 1.5vw;
    margin-bottom: 5%;
    margin-top: 5%;
}
.yywl_page5_text{
    font-size: 0.9vw;
    color: #767778;
}
.yywl_page5_text span{
    display: list-item;
    margin-left: 35px;
    line-height: 36px;
}
.yywl_page5_right{
    position: absolute;
    left: 40%;
    width: 50%;
    height: 100%;
    top: -20%;
    opacity: 0;
}
.yywl_page5_active{
    animation: fadeIn 1s forwards;
}
.yywl_page5_leave{
    animation: fadeOut 1s forwards;
}
.yywl_page5_right img{
    width: auto;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    transition: .5s fadeIn;
    opacity: 0;
}
.yywl_page5_bottom{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 10%;
    bottom: 10%;
    border-bottom: 1px solid #ccc;
}
.yywl_page5_tab{
    width: 50%;
    margin-left: 10%;
    position: absolute;
    bottom: 0px;
    font-size: 1.1vw;
    color: #989898;
    line-height: 80px;
    opacity: 0;
}
.yywl_page5_list{
    margin-right: 50px;
    display: inline-block;
    cursor: pointer;
}
.yywl_page5_list_focus{
    border-bottom: 2px solid #ea223d;
    color: #ea223d;
    height: 80px;
    margin-bottom: -1px;
}
.yywl_page5_tab_title{
    float: right;
    margin-right: 10%;
    font-size: 4vw;
    color: #ea223d;
    line-height: 4.1vw;
}
.yywl_page_6{
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 104;
    overflow: hidden;
}
.yywl_page6_title{
    position: absolute;
    top: 12%;
    left: 10%;
    font-size: 2.5vw;
    font-weight: bolder;
    z-index: 105;
}
.yywl_page_6 .yywl_hero{
    position: relative;
}
.yywl_page_6:after {
    content: "";
    bottom: 0;
    background: url('../img/n_page6_after.png') no-repeat;
    background-size: 100% 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: .5s;
    width: 100%;
    height: 291px;
    display: block;
    position: absolute;
}
.yywl_page_6.active:after {
    transition: 1s;
    transform: scaleY(1);
}
.yywl_page_footer{
    width: 100%;
    background: #141414;
    position: relative;
    z-index: 104;
    color: #fff;
}
.yywl_footer_top{
    padding-top: 60px;
}
.yywl_footer_con{
    width: 80%;
    margin: 0 auto;
}
.yywl_footer_con img{
    width: 120px;
    min-height: 86px;
}
.yywl_footer_list{
    width: 33%;
    float: left;
}
.yywl_footer_title{
    font-size: 1.5vw;
}
.yywl_footer_ewm{
    margin-right: 40px;
    float: left;
    text-align: center;
}
.yywl_footer_img{
    margin-right: 20px;
    float: left;
}
.yywl_ewm_tit{
    margin: 40px 0px 10px 0px;
    font-size: 1.05vw;
}
.yywl_footer_phone{
    font-size: 2.2vw;
    margin: 30px 0px 20px;
}
.yywl_footer_bottom{
    width: 80%;
    margin: 0px auto;
    padding: 60px 0px;
    clear: both;
    color: #8f8f8f;
}
.yywl_footer_bottom a{
    color: #8f8f8f;
    margin: 0px 5px;
}
.yywl_footer_text{
    margin: 10px 0px;
    font-size: 0.8vw;
}
.yywl_footer_text img{
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}